<template>
	<view class="">
		<Header title="推荐教材" :isHome="true" :isWhite='true'></Header>
		<view class="" style="height: 70vh;display: flex;align-items: center;justify-content: center;">
			<video :src="imgUrl+path" controls style="width: 100%;"></video>
		</view>
		<!-- <view class="" v-if="showImg" style="display: flex;align-items: center;justify-content: center;">
			<image @click="handleLook(imgUrl + content)" :src="imgUrl + content" mode="widthFix" style="width: 100%;"></image>
		</view> -->
		<!-- <view class="main">
			<view class="title">
				{{info.title}}
			</view>
			<view class="content">
				{{info.desc}}
			</view>
		</view>
		<view class="main1">
			<view class="bottomtitle">
				教材内容
			</view>
			<view class="content">
				<u-parse :content="info.content" :tagStyle="style"></u-parse>
			</view>
		</view> -->
		<view class="counselorAll" @click="showCou=true" v-if="!show">
			<image src="/static/counselor.png" mode="" class="counselor"></image>
			<view class="">
				学习顾问
			</view>
		</view>
		<view>
			<u-popup :show="showCou" :round="12" mode="center" @close="close" @open="open">
				<view class="popContent">
					<view class="title">学习顾问</view>
					<view class="">
						<image :src="imgUrl+qrcode" mode="" class="qr" @click="handleLook(imgUrl+qrcode)"></image>
					</view>
					<view class="popCon">
						长按微信二维码
					</view>
					<view class="popCon">
						学习顾问将为您的学习提供服务
					</view>
					<image src="/static/close.png" mode="" class="close" @click="showCou=false"></image>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		get,
		img_url
	} from "../../utils/request";
	export default {
		data() {
			return {
				id: '',
				imgUrl: img_url,
				qrcode: '',
				showCou: false,
				showVideo: false,
				showImg: false,
				info: {},
				path: '',
				content: '',
				eol: '',
				style: {
					// 字符串的形式
					p: "font-size:32rpx",
					span: "font-size: 30rpx",
					img: "width:100%;height:auto",
				},
			}
		},
		onLoad(opt) {
			this.path = opt.path
			// this.id = opt.id
			// this.getDetail()
			this.getQrcode()
		},
		methods: {
			openFile(filePath, fileExtension) {
				switch (fileExtension) {
					case 'jpeg':
					case 'jpg':
						this.openImage(filePath);
						break;
					case 'xls':
					case 'xlsx':
					case 'doc':
					case 'docx':
					case 'pdf':
						this.openDocument(filePath);
						break;
					case 'mp4':
						this.openVideo(filePath);
						break;
					default:
						console.log('不支持的文件类型:', fileExtension);
				}
			},
			openImage(filePath) {
				uni.previewImage({
					urls: [this.imgUrl + filePath],
					current: filePath
				});
				this.showImg = true
			},
			openVideo(filePath) {
				this.showVideo = true
			},
			openDocument(filePath) {
				uni.downloadFile({
					url: this.imgUrl + filePath,
					success: (res) => {
						if (res.statusCode === 200) {
							const tempFilePath = res.tempFilePath;
							uni.openDocument({
								filePath: tempFilePath,
								success: () => {
									console.log('文件打开成功');
								},
								fail: (err) => {
									uni.showToast({
										title: '文件打开失败',
										icon: 'none'
									})
								}
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '文件下载失败',
							icon: 'none'
						})
					}
				});
			},
			getDetail() {
				get('/article/articleDetail?id=' + this.id)
					.then(res => {
						this.info = res.data.detail
						this.content = res.data.detail.content
						this.eol = res.data.detail.eol
						this.openFile(res.data.detail.content, res.data.detail.eol)
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			getQrcode() {
				get('/system/get_contact')
					.then(res => {
						this.qrcode = res.data.qrcode
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ba {
		width: 686rpx;
		height: 260rpx;
		display: block;
		margin: 32rpx auto;
		border-radius: 20rpx;
	}

	.main {
		width: 686rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 32rpx;
		box-sizing: border-box;
		margin: 32rpx auto;

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
			margin-bottom: 20rpx;
		}
	}

	.content {
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 36rpx;
		margin: 10rpx 0;
	}

	.main1 {
		padding: 0 32rpx;

		.bottomtitle {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 30rpx;
			color: #222222;
			margin-bottom: 20rpx;
		}

		.station {
			width: 686rpx;
			height: 200rpx;
			background: #E6E6E6;
			border-radius: 12rpx;
			margin: 16rpx auto;
		}
	}

	.counselorAll {
		width: 108rpx;
		height: 108rpx;
		background: #FFFFFF;
		border: 2rpx solid #DDDDDD;
		border-radius: 50%;
		box-sizing: border-box;
		box-shadow: 0 6rpx 18rpx 0 #00000014;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 20rpx;
		color: #222222;
		text-align: center;
		padding: 20rpx 0;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;

		.counselor {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.popContent {
		width: 630rpx;
		height: 774rpx;
		border-radius: 24rpx;
		text-align: center;
		position: relative;

		.popCon {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #555555;
			margin: 20rpx 0;
		}

		.close {
			position: absolute;
			width: 72rpx;
			height: 72rpx;
			bottom: -100rpx;
			left: 280rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #1A1A1A;
			margin: 50rpx 0;

		}


		.qr {
			width: 400rpx;
			height: 400rpx;
		}

		.allBtn {
			display: flex;
			justify-content: center;
			margin-top: 60rpx;

			view {
				width: 239rpx;
				height: 96rpx;
				border-radius: 48rpx;
				text-align: center;
				line-height: 96rpx;
			}

			.fanhui {
				margin-right: 20rpx;
				background: #FFFFFF;
				border: 2rpx solid #1A1A1A;
			}

			.continue {
				background: #FFD275;
			}
		}
	}
</style>